<template>
  <div id="display">
    <div v-for="(item, index) in products" :item="item" :key="index">
      <router-link
        :to="{
          name:'CommodityList',
          params: {
            id: item.id,
            name: item.name,
            price: item.price,
          },
        }">
        <div class="contact">
          <img :src="item.img" :title="item.name" />
          <div id="contact">
            <h2>{{ item.name }}</h2>
            <span class="count">{{ item.num }}</span
            ><span class="count2">折起</span>
          </div>
        </div>
      </router-link>
    </div>
        <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "secondPage",
  data() {
    return {
      products: [
        {
          id: "1",
          name: "太平鸟男女装专场",
          num: "9",
          img: "https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/23/198/ias_6a4fc2fd6736f36f4980382dc7e27f83_1135x545_85.jpg",
          price: "1000",
        },
        {
          id: "2",
          name: "卡宾Cabbeen男装专场",
          num: "8",
          img: "https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/22/154/ias_a781e207876ba28ea1c1988acee73ba1_1135x545_85.jpg",
          price: "2000",
        },
        {
          id: "3",
          name: "诗凡黎SEIFINI女装专场",
          num: "6",
          img: "https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/03/26/152/ias_c1291a5a78aceaeffe392b420797ed80_1135x545_85.jpg",
          price: "3000",
        },
      ],
    };
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
  color: #807e7b;
}
#display {
  background-color: #f9f9fa;
  overflow: scroll;
  margin-top: 3px;
}
#display::-webkit-scrollbar {
  display: none;
}
#display img {
  width: 900px;
  margin: 20px 50px;
  border-radius: 20px 20px 0 0;
}
#contact {
  width: 900px;
  margin: 0 auto;
  margin-top: -23px;
  margin-bottom: 30px;
  border-radius: 0 0 20px 20px;
  padding: 10px 0 10px 0;
}
.contact h2,
.count {
  text-decoration: none;
  margin-left: 50px;
}
.count {
  font-size: 30px;
  color: #e04f9f;
}
.count2 {
  font-size: 18px;
}
#contact {
  background-color: #fff;
}
</style>